<template>
  <div class="app-container">
    <!-- 顶部课程&学生信息概览 -->
    <div class="header-info">
      <div class="course-info">
        <span class="label">课程：</span>
        <!-- 课程名称动态显示 -->
        <span class="value">{{ selectedCourse.courseName }}</span>
      </div>
      <div class="student-info">
        <span class="label">测试学生：</span>
        <!-- 学生信息动态显示 -->
        <span class="value">{{ selectedCourse.studentInfo }}</span>
        <div class="score-summary">
          <!-- 成绩统计动态显示 -->
          <span>{{ selectedCourse.scoreSummary }}</span>
          <el-button type="text" size="small">查看成绩计算明细</el-button>
        </div>
      </div>
    </div>

    <!-- 顶部筛选区域（课程切换 + 任务类型） -->
    <div class="filter-section">
      <el-row :gutter="20" align="middle">
        <!-- 课程切换下拉 -->
        <el-col :span="4">
          <el-select
            v-model="selectedCourseKey"
            placeholder="选择课程"
            class="filter-item"
            @change="handleCourseChange"
          >
            <el-option
              v-for="(course, key) in courseList"
              :key="key"
              :label="course.courseName"
              :value="key"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="selectedType"
            placeholder="任务类型"
            class="filter-item"
            @change="handleTypeChange"
          >
            <el-option
              v-for="type in typeOptions"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <!-- 加减分规则按钮 -->
          <el-button
            type="primary"
            class="filter-item"
            @click="toggleRuleVisible"
          >
            {{ ruleVisible ? '隐藏加减分规则' : '加减分规则' }}
          </el-button>
        </el-col>
        <el-col :span="8">
          <el-input
            v-model="searchInput"
            placeholder="搜索"
            clearable
            @keyup.enter="searchStudents"
            class="filter-item-input"
          />
        </el-col>
      </el-row>
      <!-- 加减分规则内容 -->
      <div class="rule-content" v-if="ruleVisible">
        <p>1、任务成绩反馈数量10个内加1分，10~30个加2分，30个以上加3分；</p>
        <p>2、有效反馈（反馈后评分者修正）1~3个加1分，每增加3个加1分，10分封顶；</p>
        <p>3、期末作品评分投票数1~6个加1分，每增加6个加1分，10分封顶；</p>
        <p>4、课程问答的有效提问数量1~5个加1分，每增加5个加1分，10分封顶；</p>
        <p>5、课程问答的有效回复数1~5个加1分，每增加5个加1分，10分封顶；</p>
        <p>6、学生助教表现优秀加15分，合格加10分，不合格0分，严重不合格减5分；</p>
        <p>7、学习小组长根据小组的综合表现进行加减分，优秀加5分，良好加4分，中等加3分，合格加2分，不合格0分，严重不合格减3分；</p>
        <p>8、旷课每2次减1分（下学期：旷课1次减1分或2分）；</p>
        <p>9、错误反馈1~3个减1分，每3个减1分；</p>
        <p>10、课程问答灌水贴每1~3个减1分，每3个减1分；</p>
      </div>
    </div>

    <!-- 学生成绩表格区域 -->
    <div class="table-section">
      <el-table
        :data="currentPageData"
        style="width: 100%"
        border
        stripe
      >
        <el-table-column
          prop="taskName"
          label="任务"
          sortable
        />
        <el-table-column
          prop="weight"
          label="权重占比(%)"
          sortable
        />
        <el-table-column
          prop="deadline"
          label="截止时间"
          sortable
        />
        <el-table-column
          prop="selfComment"
          label="自评语"
          sortable
        />
        <el-table-column
          prop="selfScore"
          label="自评"
          sortable
        />
        <el-table-column
          prop="teacherComment"
          label="评语"
          sortable
        />
        <el-table-column
          prop="score"
          label="得分"
          sortable
        >
          <template #default="scope">
            <div class="score-display">
              <span :class="getScoreClass(scope.row.score)">{{ scope.row.score }}</span>
              <el-tag 
                :type="getTagType(scope.row.score)" 
                size="mini" 
                class="ml-2"
              >
                {{ getGradeLabel(scope.row.score) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="answerStatus"
          label="回答"
          sortable
        />
        <el-table-column
          prop="browseStatus"
          label="浏览"
          sortable
        >
          <template #default="scope">
            <el-tag 
              :type="scope.row.browseStatus === '已浏览' ? 'success' : 'info'"
              effect="light"
            >
              {{ scope.row.browseStatus || '未浏览' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredTableData.length"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟任务下拉选项（可根据实际接口替换）

// 多课程数据配置
const courseList = ref({
  // 课程1：前端框架应用项目开发（原数据）
  frontend: {
    courseName: '前端框架应用项目开发',
    studentInfo: '33333333 22软件技术3班',
    scoreSummary: '任务分：0分，加分：10分，课程分：10分，总评：8分。',
    tableData: [
      {
        taskName: 'Vue3开发初体验',
        weight: 7.5,
        deadline: '2024/03/17 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'Vue3组件化开发',
        weight: 10.0,
        deadline: '2024/03/31 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'Vue前端基础刷题',
        weight: 7.5,
        deadline: '2024/05/12 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'Vue3路由的使用',
        weight: 7.5,
        deadline: '2024/04/07 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '电影列表项目',
        weight: 7.5,
        deadline: '2024/04/14 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'Vue自动化测试',
        weight: 4.5,
        deadline: '2024/04/18 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '状态管理Pinia',
        weight: 10.5,
        deadline: '2024/04/22 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '使用UI组件库',
        weight: 8.0,
        deadline: '2024/04/30 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'common-list开源组件',
        weight: 12.0,
        deadline: '2024/05/07 23:59:59',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'Vue综合项目',
        weight: 25.0,
        deadline: '2024/05/15 09:55:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      }
    ]
  },
  // 课程2：24春季进销存系统设计与实现
  inventory: {
    courseName: '24春季进销存系统设计与实现',
    studentInfo: '33333333 22软件技术3班',
    scoreSummary: '任务分：0分，减分：0分，课程分：0分，总评：0分。',
    tableData: [
      {
        taskName: '复习',
        weight: 10.0,
        deadline: '2024/04/12 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '库表设计',
        weight: 6.0,
        deadline: '2024/04/30 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '员工管理',
        weight: 6.0,
        deadline: '2024/04/30 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '客户管理',
        weight: 6.0,
        deadline: '2024/05/08 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '销：进气单',
        weight: 6.0,
        deadline: '2024/05/09 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '用编程改进进气单',
        weight: 6.0,
        deadline: '2024/05/27 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '客户对账',
        weight: 6.0,
        deadline: '2024/05/27 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '供应商与进气单',
        weight: 6.0,
        deadline: '2024/05/28 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '计提与预警初步',
        weight: 6.0,
        deadline: '2024/05/29 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '小考',
        weight: 3.0,
        deadline: '2024/05/29 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '盘点和日满月结',
        weight: 6.0,
        deadline: '2024/05/30 22:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'VBA基础考试',
        weight: 3.0,
        deadline: '2024/05/24 22:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '系统登录',
        weight: 4.5,
        deadline: '2024/06/04 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: 'VBA程序调试',
        weight: 4.5,
        deadline: '2024/06/05 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '权限管理',
        weight: 4.5,
        deadline: '2024/06/08 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '单据确认处理',
        weight: 4.5,
        deadline: '2024/06/12 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '数据归档处理',
        weight: 4.5,
        deadline: '2024/06/13 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      },
      {
        taskName: '系统发布和日常运维',
        weight: 4.5,
        deadline: '2024/06/13 12:00:00',
        selfComment: '',
        selfScore: '未评',
        teacherComment: '',
        score: '未评',
        answerStatus: '未作答',
        browseStatus: '未浏览'
      }
    ]
  }
  // 可继续扩展更多课程...
});

// 默认选中课程
const selectedCourseKey = ref('frontend');
const selectedCourse = computed(() => courseList.value[selectedCourseKey.value]);

// 任务类型下拉
const typeOptions = ref([
  { label: '刷题', value: 'brush-questions' },
  { label: '作品', value: 'opus' }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);

// 筛选条件
const selectedType = ref('');
const searchInput = ref('');
const ruleVisible = ref(false); 

// 切换课程时更新表格数据
const handleCourseChange = (key) => {
  selectedCourseKey.value = key;
  currentPage.value = 1; // 切换课程后重置页码
};

// 更新任务类型筛选
const handleTypeChange = (val) => {
  console.log('选中类型：', val);
};

// 切换加减分规则显示隐藏
const toggleRuleVisible = () => {
  ruleVisible.value = !ruleVisible.value;
};

// 搜索逻辑
const searchStudents = () => {
  console.log('搜索条件：', {
    course: selectedCourseKey.value,
    type: selectedType.value,
    keyword: searchInput.value
  });
  currentPage.value = 1; // 搜索后重置页码
};

// 过滤后的数据（基于当前选中课程的任务）
const filteredTableData = computed(() => {
  let result = [...selectedCourse.value.tableData];
  
  // 按任务名称模糊过滤
  if (searchInput.value) {
    const keyword = searchInput.value.toLowerCase();
    result = result.filter(item => 
      item.taskName.toLowerCase().includes(keyword) 
    );
  }
  
  // 按任务类型过滤（如果有选中类型）
  if (selectedType.value) {
    // 这里需要根据实际业务逻辑匹配任务类型
    // 示例：假设任务有type字段
    result = result.filter(item => item.type === selectedType.value);
  }
  
  return result;
});

// 当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredTableData.value.slice(start, end);
});

// 分页事件
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
};
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

// 得分样式、标签逻辑
const getScoreClass = (score) => {
  const numScore = Number(score);
  if (isNaN(numScore)) return 'text-gray-500';
  if (numScore >= 85) return 'text-green-600 font-bold';
  if (numScore >= 60) return 'text-blue-600';
  return 'text-red-600 font-bold';
};
const getTagType = (score) => {
  const numScore = Number(score);
  if (isNaN(numScore)) return 'info';
  if (numScore >= 85) return 'success';
  if (numScore >= 60) return 'primary';
  return 'danger';
};
const getGradeLabel = (score) => {
  const numScore = Number(score);
  if (isNaN(numScore)) return '未评';
  if (numScore >= 85) return '优秀';
  if (numScore >= 70) return '良好';
  if (numScore >= 60) return '合格';
  return '不合格';
};
</script>


<style scoped>
.app-container {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 80%;
    max-height: calc(100vh - 80px);
    /* 视口高度减去顶部空间和边距 */
    overflow-y: auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 顶部信息概览 */
.header-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.course-info,
.student-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.label {
  font-weight: 500;
}
.value {
  color: #333;
}
.score-summary {
  margin-top: 4px;
  font-size: 14px;
  color: #666;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}
.filter-item {
  width: 100%;
}
.filter-item-input {
  width: 100%;
}
/* 加减分规则内容样式 */
.rule-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

/* 表格区域 */
.table-section {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.score-display {
  display: flex;
  align-items: center;
}
.ml-2 {
  margin-left: 0.5rem;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 文本样式（可根据 Element Plus 主题色调整） */
.text-green-600 { color: #67c23a; }
.text-blue-600 { color: #409eff; }
.text-red-600 { color: #f56c6c; }
.text-gray-500 { color: #909399; }
.font-bold { font-weight: 700; }
</style>